<template>
  <div class="app-container  photoRegisterDailog">
    <div class="main-container-content">
      <el-row :gutter="10">

        <div class="contentBoxs_form">

          <el-col :xs='24' :sm="16" :md="11" :lg="10" :xl="8">

            <el-form :model="baseInfo" :rules="baseInfoFormRules" ref="baseInfoForm" label-width="100px"
              class="demo-ruleForm contentBoxs_form_box">
              <div class="photoRegisterDailog_title">
                <div class="titleContent_left">
                  <div class="titleContent_left_line"></div>
                  <div class="titleContent_left_title">
                    数字病理智能教学平台注册
                  </div>
                </div>
                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

              </div>

              <el-form-item label="注册成为" prop="type">
                  <el-radio-group v-model="baseInfo.type">
                    <el-radio :label="1">教师</el-radio>
                    <el-radio :label="2">学生</el-radio>
                  </el-radio-group>
                </el-form-item>
              <div class="flexDiv">
               
                <el-form-item label="姓名" prop="patientName">
                  <el-input v-model="baseInfo.patientName" placeholder="请输入姓名" class="idNumInput">
                    <!-- <i slot="suffix" class="el-input__icon el-icon-search"></i> -->
                  </el-input>
                </el-form-item>


                <el-form-item label="" prop="sex" label-width="0px" class="noLabelItem">
                  <el-select v-model="baseInfo.sex" placeholder="性别" clearable class="sexInput">
                    <el-option v-for="dict in sexArray" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>

              </div>
              <el-form-item label="手机号" prop="patientPhone">
                <el-input v-model="baseInfo.patientPhone" placeholder="请输入手机号" :maxlength="11" class="idNumInput0" />
              </el-form-item>

              <!-- <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="baseInfo.birthDate" type="date" value-format="yyyy-MM-dd" placeholder="选择出生日期"
                  class="idNumInput0">
                </el-date-picker>
              </el-form-item> -->
              <el-form-item label="密码" prop="password">
                <el-input v-model="baseInfo.password" placeholder="班级" class="idNumInput0"></el-input>
              </el-form-item>
              <el-form-item label="重复密码" prop="newpassword">
                <el-input v-model="baseInfo.newpassword" placeholder="班级" class="idNumInput0"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="company">
                <el-input v-model="baseInfo.company" placeholder="单位" class="idNumInput0"></el-input>
              </el-form-item>
              <el-form-item label="班级" prop="grade">
                <el-input v-model="baseInfo.grade" placeholder="班级" class="idNumInput0"></el-input>
              </el-form-item>

              <el-form-item label="" prop="authority">
                <div>申请如下教学库浏览权限：</div>
                <el-select v-model="baseInfo.authority" placeholder="请选择" clearable class="idNumInput0">
                  <el-option v-for="dict in limitArray" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm()">登 记</el-button>
                <el-button @click="closeEvent">关 闭</el-button>
              </el-form-item>
            </el-form>

          </el-col>
        </div>
      </el-row>

    </div>

  </div>
</template>
    
<script>



//自定义校验规则
var checkIdCard = (rule, value, cb) => {
  const regIdCard =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  if (regIdCard.test(value)) {
    return cb();
  }
  cb(new Error("您输入的身份证号码不是有效格式"));
};
var checkPatientPhone = (rule, value, cb) => {
  const regPatientPhone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  if (regPatientPhone.test(value)) {
    return cb();
  }
  cb(new Error("您输入的手机号码不是有效格式"));
};
export default {
  name: "Index",
  dicts: [

  ],
  components: {

  },
  data() {
    return {
      limitArray:[
      {
          value: '0',
          label: '权限1'
        }, {
          value: '1',
          label: '权限2'
        }
      ],
      deptOptionsStatus: true,
      confirmDialog: false,
      fixedBackRgb: "rgba(73, 185, 173, 1)",
      loginDialog: false,
      open: false,
      // 禁止修改

      isIdNum: true,
      // 顾客信息
      baseInfo: {
        company: undefined,
        grade: undefined,
        patientName: undefined,
        patientPhone: undefined,
        authority: undefined,
        sex: undefined,
        type: 1,//教师 1  学生  2 
        password: undefined,
        newpassword: undefined

      },
      // 顾客选择弹窗
      patientVisible: false,
      patientVisibleList: [],
      confirmIdNumShow: false,
      // 省市区
      areaList: [],
      deptOptions: [],
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      sexArray: [
        {
          value: '0',
          label: '女'
        }, {
          value: '1',
          label: '男'
        }
      ],
      // 表单校验
      baseInfoFormRules: {
        idNum: [
          {
            required: true,
            message: "身份证号不能为空",
            trigger: "blur",
          },
          { validator: checkIdCard, trigger: "blur" },
        ],
        patientName: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "blur",
          },
        ],
        birthDate: [
          {
            required: true,
            message: "出生年月不能为空",
            trigger: "blur",
          },
        ],
        patientPhone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          { validator: checkPatientPhone, trigger: "blur" },
        ],

      },

    };
  },
  computed: {

  },
  mounted() {

    this.open = true
  },
  methods: {

    closeEvent() {
      this.$emit('close')
    },
  }
};
</script>
    
<style scoped lang="scss">
.photoRegisterDailog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;

  .photoRegisterDailog_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

  }
}

.paitentSelectDailog {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 999;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
}
</style>
    
    